<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jchome.jsprun.com/jch" prefix="jch"%>
<%@ page import="java.lang.StringBuffer" %>
<%@ page import=" cn.jcenterhome.util.Common" %>
<c:set var="tpl_noSideBar" value="1" scope="request" />
<jsp:include page="${jch:template(sConfig, sGlobal, 'header.jsp')}" />


<script>
	function register(id, result) {
		if(result) {
			$('registersubmit').disabled = true;
			window.location.href = "${jumpurl}";
		} else {
			updateseccode();
		}
	}
</script>
<form id="registerform" name="registerform" action="do.jsp?ac=${sConfig.register_action}${empty url_plus ? '' : '&'}${url_plus}&ref" method="post" class="c_form" onsubmit="return checkfrom()">
	<table cellpadding="0" cellspacing="0" class="formtable">
		<caption>
			<h2>注册本站帐号</h2>
			<p>请完整填写以下信息进行注册。<br>注册完成后，该帐号将作为您在本站的通行帐号，您可以享受本站提供的各种服务。</p>
		</caption>
		<c:if test="${not empty invits}">
			<tr>
				<th width="100">好友邀请</th>
				<td>
					<a href="space.jsp?${url_plus}" target="_blank">${jch:avatar1(invits.uid,sGlobal,sConfig)}</a>
					<a href="space.jsp?${url_plus}" target="_blank">${sNames[invits.uid]}</a>
				</td>
			</tr>
		</c:if>
		<c:if test="${sConfig.seccode_register==1}">
			<c:choose>
				<c:when test="${sConfig.questionmode==1}">
					<tr>
						<th width="100" style="vertical-align: top;">请先回答问题</th>
						<td>
							<p>${jch:question(pageContext.request,pageContext.response)}</p>
							<input type="text" id="seccode" name="seccode" value="" class="t_input" onBlur="checkSeccode()" tabindex="1" autocomplete="off" />&nbsp;<span id="checkseccode">&nbsp;</span>
						</td>
					</tr>
				</c:when>
				<c:otherwise>
					<tr>
						<th width="100" style="vertical-align: top;">验证码</th>
						<td>
							<script>seccode();</script>
							<p>请输入上面的4位字母或数字，看不清可<a href="javascript:updateseccode()">更换一张</a></p>
							<input type="text" id="seccode" name="seccode" value="" class="t_input" onBlur="checkSeccode()" tabindex="1" autocomplete="off" />&nbsp;<span id="checkseccode">&nbsp;</span>
						</td>
					</tr>
				</c:otherwise>
			</c:choose>
		</c:if>
<c:if test="${empty invits}">
		<tr>
			<th width="100">邀请码</th>
			<td><input type="text" id="yqcode" name="yqcode" value="" class="t_input"  onBlur="checkyqcode()" tabindex="2" />&nbsp;<span ><a href="">获取邀请码</a></span> <span id="checkyqcode">&nbsp;</span></td>
			
		</tr>
</c:if>
		<tr>
			<th width="100">用户名</th>
			<td><input type="text" id="username" name="username" value="" class="t_input" onBlur="checkUserName()" tabindex="2" />&nbsp;<span id="checkusername">&nbsp;</span></td>
		</tr>
		<tr>
			<th>注册密码</th>
			<td>
				<input type="password" name="password" id="password" value="" class="t_input" onBlur="checkPassword()" onkeyup="checkPwd(this.value);" tabindex="3" />&nbsp;<span id="checkpassword">&nbsp;</span><br />
				<style type="text/css">
					.psdiv0,.psdiv1,.psdiv2,.psdiv3,.psdiv4{position:relative;height:30px;color:#666}/*密码强度容器*/
					.strongdepict{position:absolute; width:300px;left:0px;top:3px}/*密码强度固定文字*/
					.strongbg{position:absolute;left:0px;top:22px;width:235px!important;width:234px;height:10px;background-color:#E0E0E0; font-size:0px;line-height:0px}/*灰色强度背景*/
					.strong{float:left;font-size:0px;line-height:0px;height:10px}/*色块背景*/
					
					.psdiv0 span{display:none}
					.psdiv1 span{display:inline;color:#F00}
					.psdiv2 span{display:inline;color:#C48002}
					.psdiv3 span{display:inline;color:#2CA4DE}
					.psdiv4 span{display:inline;color:#063}
					
					.psdiv0 .strong{ width:0px}
					.psdiv1 .strong{ width:25%;background-color:#F00}
					.psdiv2 .strong{ width:50%;background-color:#F90}
					.psdiv3 .strong{ width:75%;background-color:#2CA4DE}
					.psdiv4 .strong{ width:100%;background-color:#063}
				</style>
				<div class="psdiv0" id="chkpswd">
					<div class="strongdepict">密码安全程度：<span id="chkpswdcnt">太短</span></div>
					<div class="strongbg"><div class="strong"></div></div>
				</div>
			</td>
		</tr>
		<tr>
			<th>再次输入密码</th>
			<td><input type="password" id="password2" name="password2" value="" class="t_input" onBlur="checkPassword2()" tabindex="4" />&nbsp;<span id="checkpassword2">&nbsp;</span></td>
		</tr>
		<tr>
			<th>性别</th>
			<td>
			<label for="sexm"><input id="sexm" type="radio" value="1" name="sex" ${sexmap[1]} onclick="changemsg('sexm','checksex',1)" checked/>男</label>
			<label for="sexw"><input id="sexw" type="radio" value="2" name="sex" ${sexmap[2]} onclick="changemsg('sexw','checksex',1)"/>女</label>
			<span id="checksex">&nbsp;</span>
			</td>
		</tr>
		<tr>
					<th>生日</th>
					<td>
						<select id="birthyear" name="birthyear" onchange="showbirthday();">
					<option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option>
						</select> 年
						<select id="birthmonth" name="birthmonth" onchange="showbirthday();">
							<option value="0">&nbsp;</option>
							<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
						</select> 月
						<select id="birthday" name="birthday" onchange="changemsg('birthday','checkbirth',2)">
							<option value="0">&nbsp;</option>

						</select> 日
                        <span id="checkbirth" > &nbsp;</span>
						<!-- <a href="cp.jsp?ac=friend&op=search&view=birthyear" target="_blank">&raquo; 查找同生日朋友</a> -->
					</td>
					<td>

					</td>
				</tr>
	<tr>
					<th>家乡</th>
					<td id="birthcitybox">
						<script type="text/javascript" src="source/script_city.js"></script>
						<script type="text/javascript">
						<!--
						showprovince('birthprovince', 'birthcity', '${space.birthprovince}', 'birthcitybox');
						showcity1('birthcity', '${space.birthcity}', 'birthprovince', 'birthcitybox','birthcity','checkbirthaddress',2);
						
						//-->
						</script>
						<!-- <a href="cp.jsp?ac=friend&op=search&view=birth" target="_blank">&raquo; 查找老乡</a> -->
						<span id="checkbirthaddress">&nbsp;</span>
					</td>
					<td>

					</td>
				</tr>

				<tr>
					<th>居住地</th>
					<td id="residecitybox">
						<script type="text/javascript">
						<!--
						showprovince('resideprovince', 'residecity', '${space.resideprovince}', 'residecitybox');
						showcity1('residecity', '${space.residecity}', 'resideprovince', 'residecitybox','residecity','checkresidecity',2);
						//-->
						</script>
						 <span id="checkresidecity">&nbsp;</span>
						
					</td>
					<td>

					</td>
				</tr>
        <tr>
      			<th>QQ</th>
      			<td>
      				<input type="text" id="qq" name="qq" value="" class="t_input" tabindex="5" onBlur="checkQQ()"/>
                      <span id="checkqq">&nbsp;</span>
                      <br>请准确填入您QQ号码，胡乱填写qq号码，账号将被删除！
      			</td>
      		</tr>
		<tr>
			<th>邮箱</th>
			<td>
				<input type="text" id="email" name="email" value="@" class="t_input" tabindex="5" />
				<br>请准确填入您的邮箱，在忘记密码，或者您使用邮件通知功能时，会发送邮件到该邮箱。
			</td>
		</tr>
		<c:if test="${not empty registerRule}">
			<tr>
				<th>服务条款</th>
				<td>
					<div name="rule" style="border: 1px solid #C3C3C3; width: 500px; height: 100px; overflow: auto; padding: 5px;">${registerRule}</div>
					<input type="checkbox" name="accede" id="accede" value="1">我已阅读，并同意以上服务条款
					<script type="text/javascript">
						function checkClause() {
							if($('accede').checked) {
								return true;
							} else {
								alert("您必须同意服务条款后才能注册");
								return false;
							}
						}
					</script>
				</td>
			</tr>
		</c:if>
		<tr>
			<th>&nbsp;</th>
			<td>
				<input type="hidden" name="refer" value="space.jsp?do=home" />
				<input type="submit" id="registersubmit" name="registersubmit" value="注册新用户" class="submit" onclick="<c:if test='${not empty registerRule }'>if(!checkClause()){return false;}</c:if>ajaxpost('registerform', 'register');" tabindex="6" />
			</td>
		</tr>
		<tr>
			<th>&nbsp;</th>
			<td id="__registerform" style="color: red; font-weight: bold;"></td>
		</tr>
	</table>
	<input type="hidden" name="formhash" value="${jch:formHash(sGlobal,sConfig,false)}" />
</form>

<script type="text/javascript">
<!--
	$('username').focus();
	var lastUserName = lastPassword = lastEmail = lastSecCode = '';
	function checkUserName() {
		var userName = $('username').value;
		if(userName == lastUserName) {
			return;
		} else {
			lastUserName = userName;
		}
		var cu = $('checkusername');
		var unLen = userName.replace(/[^\x00-\xff]/g, "**").length;

		if(unLen < 3 || unLen > 8) {
			warning(cu, unLen < 3 ? '用户名小于3个字符' : '用户名超过 8 个字符');
			return;
		}
		 var regu = "^[a-zA-Z\u4e00-\u9fa5]+$"; 
		 var re = new RegExp(regu); 
		 if (!re.test(userName)) {
		 warning(cu, "用户名只能为中文或者英文!");
		 return;
		 }
		
		ajaxresponse('checkusername', 'op=checkusername&username=' + (is_ie && document.charset == 'utf-8' ? encodeURIComponent(userName) : userName));
	}

function checkyqcode() {
		var yqcode = $('yqcode').value;
        var cu = $('checkyqcode');
		if(yqcode == "") {
            warning(cu, '邀请码不能为空！');
            return;
		}
		ajaxresponse('checkyqcode', 'op=checkyqcode&yqcode=' + (is_ie && document.charset == 'utf-8' ? encodeURIComponent(yqcode) : yqcode));
	}



	function checkPassword(confirm) {
		var password = $('password').value;
		if(!confirm && password == lastPassword) {
			return;
		} else {
			lastPassword = password;
		}
		var cp = $('checkpassword');
		if(password == '' || /[\'\"\\]/.test(password)) {
			warning(cp, '密码空或包含非法字符');
			return false;
		} else {
			cp.style.display = '';
			cp.innerHTML = '<img src="image/check_right.gif" width="13" height="13">';
			if(!confirm) {
				checkPassword2(true);
			}
			return true;
		}
	}
	function checkPassword2(confirm) {
		var password = $('password').value;
		var password2 = $('password2').value;
		var cp2 = $('checkpassword2');
		if(password2 != '') {
			checkPassword(true);
		}
		if(password == '' || (confirm && password2 == '')) {
			cp2.style.display = 'none';
			return;
		}
		if(password != password2) {
			warning(cp2, '两次输入的密码不一致');
		} else {
			cp2.style.display = '';
			cp2.innerHTML = '<img src="image/check_right.gif" width="13" height="13">';
		}
	}
	function checkSeccode() {
		var seccodeVerify = $('seccode').value;
		if(seccodeVerify == lastSecCode) {
			return;
		} else {
			lastSecCode = seccodeVerify;
		}
		ajaxresponse('checkseccode', 'op=checkseccode&seccode=' + (is_ie && document.charset == 'utf-8' ? encodeURIComponent(seccodeVerify) : seccodeVerify));
	}
	function ajaxresponse(objname, data) {
		var x = new Ajax('XML', objname);
		var s ='do.jsp?ac=${sConfig.register_action}&' + data;
		//alert("s="+s)
		x.get(s, function(s){
			var obj = $(objname);
			s = trim(s);
			if(s.indexOf('succeed') > -1) {
				obj.style.display = '';
				obj.innerHTML = '<img src="image/check_right.gif" width="13" height="13">';
				obj.className = "warning";
			} else {
				warning(obj, s);
			}
		});
	}
	function warning(obj, msg) {
		if((ton = obj.id.substr(5, obj.id.length)) != 'password2') {
			$(ton).select();
		}
		obj.style.display = '';
		obj.innerHTML = '<img src="image/check_error.gif" width="13" height="13"> &nbsp; ' + msg;
		obj.className = "warning";
	}
    function changemsg(objid,objmsg,type)
    {  
        var obj=$(objid);
         if(type==1)
         {
             if(obj.checked)
             {
                 $(objmsg).style.display="none";
             }
         }else
         {
             if(obj.value!="")
             {
                  $(objmsg).style.display="none";
             }
         }
    }
	function checkPwd(pwd){

		if (pwd == "") {
			$("chkpswd").className = "psdiv0";
			$("chkpswdcnt").innerHTML = "";
		} else if (pwd.length < 3) {
			$("chkpswd").className = "psdiv1";
			$("chkpswdcnt").innerHTML = "太短";
		} else if(!isPassword(pwd) || !/^[^%&]*$/.test(pwd)) {
			$("chkpswd").className = "psdiv0";
			$("chkpswdcnt").innerHTML = "";
		} else {
			var csint = checkStrong(pwd);
			switch(csint) {
				case 1:
					$("chkpswdcnt").innerHTML = "很弱";
					$( "chkpswd" ).className = "psdiv"+(csint + 1);
					break;
				case 2:
					$("chkpswdcnt").innerHTML = "一般";
					$( "chkpswd" ).className = "psdiv"+(csint + 1);
					break;
				case 3:		
					$("chkpswdcnt").innerHTML = "很强";
					$("chkpswd").className = "psdiv"+(csint + 1);
					break;
			}
		}
	}

function checkQQ(){
  var k=$("qq").value;

  //^表示不匹配。d表示任意数字，{5,10}表示长度为5到10。
  var reg=/^\d{5,11}$/;
  var cu=$("checkqq");
  //用上面定义的正则表达式测试，如果不匹配则返回false
  if(!reg.test(k)){

      warning(cu, '请输入正确qq号码！');
    return false;
  }  else {
      cu.style.display = '';
      cu.innerHTML = '<img src="image/check_right.gif" width="13" height="13">';
  		}
}
	function isPassword(str){
		if (str.length < 3) return false;
		var len;
		var i;
		len = 0;
		for (i=0;i<str.length;i++){
			if (str.charCodeAt(i)>255) return false;
		}
		return true;
	}
	function charMode(iN){ 
		if (iN>=48 && iN <=57) //数字 
		return 1; 
		if (iN>=65 && iN <=90) //大写字母 
		return 2; 
		if (iN>=97 && iN <=122) //小写 
		return 4; 
		else 
		return 8; //特殊字符 
	} 
	//计算出当前密码当中一共有多少种模式 
	function bitTotal(num){ 
		modes=0; 
		for (i=0;i<4;i++){ 
			if (num & 1) modes++; 
			num>>>=1; 
		} 
		return modes; 
	} 
 
	//返回密码的强度级别 
	function checkStrong(pwd){ 
		modes=0; 
		for (i=0;i<pwd.length;i++){ 
			//测试每一个字符的类别并统计一共有多少种模式. 
			modes|=charMode(pwd.charCodeAt(i)); 
		} 
		return bitTotal(modes);
	}
	
	function checkDz(eid)
	{
		var elem= $('birthprovince');
		alert(elem.value);
		
	}
	function checkfrom()
    {
        var sexnan=$('sexm');
        var sexnv=$('sexw');
        var birthmonth=$("birthmonth");
        var birthday=$("birthday");
        var birthprovince=$("birthprovince");
        var birthcity=$("birthcity");
        var resideprovince=$("resideprovince");
        var residecity=$("residecity");

        if(!sexnan.checked&&!sexnv.checked)
        {
            var cp2 = $('checksex');
            cp2.style.display = '';
		    cp2.innerHTML = '<img src="image/check_error.gif" width="13" height="13"> &nbsp; 性别为必填选选项';
		    cp2.className = "warning";
            //warning(cp2, '性别为必填选选项');
			//return;
			return false;
        }
        if(birthmonth.value==0||birthday.value==0)
        {
             var cp2 = $('checkbirth');
            cp2.style.display = '';
		    cp2.innerHTML = '<img src="image/check_error.gif" width="13" height="13"> &nbsp; 请选择你的出生日期';
		    cp2.className = "warning";
            //warning(cp2, '请选择你的出生日期');
			//return;
			return false;
        }
        if(birthprovince.value==""||birthcity.value=="")
        {
            var cp2 = $('checkbirthaddress');
            cp2.style.display = '';
		    cp2.innerHTML = '<img src="image/check_error.gif" width="13" height="13"> &nbsp; 家乡为必填选项';
		    cp2.className = "warning";
            //warning(cp2, '家乡为必填选项');
			//return;
			return false;
        }
        if(resideprovince.value==""||residecity.value=="")
        {
            var cp2 = $('checkresidecity');
            cp2.style.display = '';
		    cp2.innerHTML = '<img src="image/check_error.gif" width="13" height="13"> &nbsp; 居住地为必填选项';
		    cp2.className = "warning";
            //warning(cp2, '居住地为必填选选项');
			return false;
        }
       return true;
      // ajaxpost('registerform', 'register');
    }
	
//-->
</script>
<jsp:include page="${jch:template(sConfig, sGlobal, 'footer.jsp')}" />